<template>  
  <div class="payment-records">  
    <!-- 搜索区域 -->  
    <div class="search-section">  
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">  
        <el-form-item label="客户编号">  
          <el-input v-model="searchForm.customerCode" placeholder="请输入"></el-input>  
        </el-form-item>  
        <el-form-item label="客户名称">  
          <el-input v-model="searchForm.customerName" placeholder="请输入"></el-input>  
        </el-form-item>  
        <el-form-item label="回款状态">  
          <el-select v-model="searchForm.paymentStatus" placeholder="已回款">  
            <el-option label="全部" value=""></el-option>  
            <el-option label="已回款" value="paid"></el-option>  
            <el-option label="未回款" value="unpaid"></el-option>  
            <el-option label="部分回款" value="partial"></el-option>  
          </el-select>  
        </el-form-item>  
        <el-form-item>  
          <el-button type="primary" @click="handleSearch">搜索</el-button>  
          <el-button @click="handleReset">重置</el-button>  
        </el-form-item>  
      </el-form>  
    </div>  

    <!-- 统计区域 -->  
    <div class="statistics-section">  
      <div class="amount-item">  
        <span>未收欠款</span>  
        <span class="amount">¥ {{ formatAmount(totalUnpaid) }}</span>  
      </div>  
      <div class="separator">=</div>  
      <div class="amount-item">  
        <span>应收欠款</span>  
        <span class="amount">¥ {{ formatAmount(totalReceivable) }}</span>  
      </div>  
      <div class="separator">-</div>  
      <div class="amount-item">  
        <span>已回欠款</span>  
        <span class="amount">¥ {{ formatAmount(totalPaid) }}</span>  
      </div>  
    </div>  

    <!-- 表格区域 -->  
    <el-table  
      :data="tableData"  
      border  
      style="width: 100%"  
      :header-cell-style="{ background: '#f5f7fa' }"  
    >  
      <el-table-column prop="customerCode" label="客户编号" width="150">  
        <template slot-scope="scope">  
          <el-link type="primary">{{ scope.row.customerCode }}</el-link>  
        </template>  
      </el-table-column>  
      <el-table-column prop="customerName" label="客户名称" width="180"></el-table-column>  
      <el-table-column prop="phone" label="手机号码" width="120"></el-table-column>  
      <el-table-column prop="totalAmount" label="合计应收金额" width="120">  
        <template slot-scope="scope">  
          {{ formatAmount(scope.row.totalAmount) }}  
        </template>  
      </el-table-column>  
      <el-table-column prop="paidAmount" label="已回金额" width="120">  
        <template slot-scope="scope">  
          {{ formatAmount(scope.row.paidAmount) }}  
        </template>  
      </el-table-column>  
      <el-table-column prop="unpaidAmount" label="未回金额" width="120">  
        <template slot-scope="scope">  
          {{ formatAmount(scope.row.unpaidAmount) }}  
        </template>  
      </el-table-column>  
      <el-table-column label="操作" width="100" fixed="right">  
        <template slot-scope="scope">  
          <el-button type="text" @click="handleView(scope.row)">查看</el-button>  
        </template>  
      </el-table-column>  
    </el-table>  

    <!-- 分页 -->  
    <div class="pagination-section">  
      <span class="total-info">共 {{ total }} 条</span>  
      <el-pagination  
        @size-change="handleSizeChange"  
        @current-change="handleCurrentChange"  
        :current-page="currentPage"  
        :page-sizes="[15, 30, 50, 100]"  
        :page-size="pageSize"  
        layout="prev, pager, next, jumper"  
        :total="total"  
      >  
      </el-pagination>  
      <el-select v-model="pageSize" class="page-size-select">  
        <el-option  
          v-for="size in [15, 30, 50, 100]"  
          :key="size"  
          :label="`${size}条/页`"  
          :value="size"  
        ></el-option>  
      </el-select>  
      <span class="jump-page">跳至<el-input  
        v-model="jumpPage"  
        class="jump-input"  
        @keyup.enter.native="handleJumpPage"  
      ></el-input>页</span>  
    </div>  
  </div>  
</template>  

<script>  
export default {  
  name: 'PaymentRecords',  
  
  data() {  
    return {  
      // 搜索表单  
      searchForm: {  
        customerCode: '',  
        customerName: '',  
        paymentStatus: ''  
      },  

      // 统计数据  
      totalUnpaid: 14229243.68,  
      totalReceivable: 4489023.68,  
      totalPaid: 50761.00,  

      // 表格数据  
      tableData: [  
        {  
          customerCode: 'SA240816971',  
          customerName: '韩约客户总',  
          phone: '13222221123',  
          totalAmount: 1040.00,  
          paidAmount: 0.00,  
          unpaidAmount: 1040.00  
        },  
        {  
          customerCode: 'SA240806780',  
          customerName: '8.6测试客户',  
          phone: '13022222222',  
          totalAmount: 139980.00,  
          paidAmount: 0.00,  
          unpaidAmount: 139980.00  
        }  
        // ... 更多数据  
      ],  

      // 分页  
      currentPage: 1,  
      pageSize: 15,  
      total: 172,  
      jumpPage: ''  
    }  
  },  

  methods: {  
    // 格式化金额  
    formatAmount(amount) {  
      return amount.toFixed(2)  
    },  

    // 搜索  
    handleSearch() {  
      this.fetchData()  
    },  

    // 重置  
    handleReset() {  
      this.searchForm = {  
        customerCode: '',  
        customerName: '',  
        paymentStatus: ''  
      }  
      this.fetchData()  
    },  

    // 查看详情  
    handleView(row) {  
      console.log('查看详情:', row)  
    },  

    // 分页大小改变  
    handleSizeChange(val) {  
      this.pageSize = val  
      this.fetchData()  
    },  

    // 当前页改变  
    handleCurrentChange(val) {  
      this.currentPage = val  
      this.fetchData()  
    },  

    // 跳转页面  
    handleJumpPage() {  
      const page = parseInt(this.jumpPage)  
      if (page && page > 0 && page <= Math.ceil(this.total / this.pageSize)) {  
        this.currentPage = page  
        this.fetchData()  
      }  
      this.jumpPage = ''  
    },  

    // 获取数据  
    async fetchData() {  
      // 这里应该调用实际的API  
      // const params = {  
      //   ...this.searchForm,  
      //   page: this.currentPage,  
      //   pageSize: this.pageSize  
      // }  
      // const res = await api.getPaymentRecords(params)  
      // this.tableData = res.data.list  
      // this.total = res.data.total  
    }  
  },  

  created() {  
    this.fetchData()  
  }  
}  
</script>  

<style scoped>  
.payment-records {  
  padding: 20px;  
}  

.search-section {  
  background: #fff;  
  padding: 20px;  
  margin-bottom: 20px;  
  border-radius: 4px;  
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);  
}  

.statistics-section {  
  display: flex;  
  align-items: center;  
  margin-bottom: 20px;  
  padding: 15px;  
  background: #fff;  
  border-radius: 4px;  
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);  
}  

.amount-item {  
  display: flex;  
  flex-direction: column;  
  margin: 0 15px;  
}  

.amount-item span {  
  margin-bottom: 5px;  
}  

.amount {  
  font-size: 18px;  
  font-weight: bold;  
  color: #409EFF;  
}  

.separator {  
  font-size: 20px;  
  color: #909399;  
  margin: 0 10px;  
}  

.pagination-section {  
  margin-top: 20px;  
  display: flex;  
  align-items: center;  
  justify-content: flex-end;  
}  

.total-info {  
  margin-right: 15px;  
}  

.page-size-select {  
  margin-left: 15px;  
  width: 100px;  
}  

.jump-page {  
  margin-left: 15px;  
  display: flex;  
  align-items: center;  
}  

.jump-input {  
  width: 50px;  
  margin: 0 5px;  
}  

.jump-input >>> .el-input__inner {  
  padding: 0 5px;  
  text-align: center;  
}  

/* 表格样式优化 */  
.el-table th {  
  background-color: #f5f7fa;  
  color: #606266;  
}  

.el-table td {  
  padding: 8px 0;  
}  

.el-link {  
  font-weight: normal;  
}  
</style>